<template>
	<view>
		<view class="header">
			<image class="photo" :src="photo"></image>
			<text class="name">{{name}}</text>
			<image class="vipImg" :src="vipImg"></image>
			<text class="vipStatus">{{vipStatus}}</text>
		</view>
		<view class="tipsBox">
			<text class="frame"></text>
			<text class="tipfont">皇冠会员</text>
		</view>
		<view @click="open" class="privilegeBox">
		   <text class="privilege">皇冠会员特权</text>
		   <image class="Back_icon" src="../../../static/user2/rightjt.png"></image>
		</view>
		<view  v-for="(item,index) in vipMoneydata" :key="index" :class="{memberStyle:index==num}" @click="qiedhuan(index,item)">
			<view class="member">
			<text class="month">{{item.month}}个月</text>
			<view class="numzhidin">
				送{{item.numzhidin}}次置顶
			</view>
			<text class="presentPrice"><text class="originalPrice">￥{{item.originalPrice}}</text>￥{{item.presentPrice}} </text>
		    </view>
		</view>
		<view class="tipsBox">
			<text class="frame"></text>
			<text class="tipfont">选则支付方式</text>
			<text @click="openb" class="xieyi"> 《会员服务协议》 </text>
		</view>
		<view class="payBox">
			<text class="payFont">支付方式</text>
			<text class="amountPayable">应付金额: <text class="money">￥{{money}}</text> </text>
		</view>
		<view @click="payButon(index)" class="payImgbox" v-for="(item,index) in payData" :key="index+'1'">
			<image class="payimg" :src="item.payImg"></image>
			<text class="payfonta">{{item.payFont}}</text>
			<image class="dui" v-show="index==ishow" :src="item.paychoose"></image>
		</view>
		<view class="confirmPayment">
			确认付款
		</view>
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="membershipPrivileges_box">
				<image class="memberImg" src="../../../static/user2/member.png"></image>
			   <view class="privileges">
				   <text class="frameb"></text>
				   <text class="renwuOne">任务随意发</text>
				   <text class="renwuTwo">发布任务数量不受限制</text>
			   </view>
			   <view class="privileges">
			   	   <text class="frameb"></text>
			   	   <text class="renwuOne">任务随意发</text>
			   	   <text class="renwuTwo">发布任务数量不受限制</text>		   
			   </view>
			   <view class="privileges">
			   	   <text class="frameb"></text>
			   	   <text class="renwuOne">任务随意发</text>
			   	   <text class="renwuTwo">发布任务数量不受限制</text>		   
			   </view>
			   <view class="privileges">
			   	   <text class="frameb"></text>
			   	   <text class="renwuOne">任务随意发</text>
			   	   <text class="renwuTwo">发布任务数量不受限制</text>			   
			   </view>
			   <view @click="close" class="confirem">
				   确定
			   </view>
			</view>
		</uni-popup>
		<uni-popup ref="popupb" type="center" :maskClick="false">
			<view class="agreementBox">
				<view class="agreeHeadbox">
					<image class="agrenImg" src="../../../static/user2/agren.png"></image>
				</view>
				<view class="agrenContent">
					<view class="general">
						<text class="framea"></text>
						<text class="generalfont">总则</text>
					</view>
						<view class="generalcen">
						1.薪聚客是一款推广工具类产品。
					</view>
					<view class="generalcen">
						2.本服务条款约定薪聚客与您之间关于“会员”服务的各项事项。“会员是指注册、登录、使用本服务条款中薪聚客提供的各种服务的个人。会员服务是有偿的增值服务，会员必须完成同意本服务条款，并完成付费，才能享受相关服务。
					</view>
					<view class="generalcen">
						3.本服务条款约定薪聚客与您之间关于“会员”服务的各项事项。“会员是指注册、登录、使用本服务条款中薪聚客提供的各种服务的个人。会员服务是有偿的增值服务，会员必须完成同意本服务条款，并完成付费，才能享受相关服务。
					</view>
					<view class="generalcen">
						4.本服务条款约定薪聚客与您之间关于“会员”服务的各项事项。“会员是指注册、登录、使用本服务条款中薪聚客提供的各种服务的个人。会员服务是有偿的增值服务，会员必须完成同意本服务条款，并完成付费，才能享受相关服务。
					</view>
				</view>
				<view @click="closeb" class="confiremBox">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				money:'248.00',
				photo:'../../../static/user/photo.png',
				name:'鱼书',
				vipImg:'../../../static/user2/vipa.png',
				vipStatus:'当前未开通皇冠会员',
				num:1,
				ishow:0,
				vipMoneydata:[{
					month:'1',
					numzhidin:'8',
					originalPrice:'98.0',
					presentPrice:'88.0',
					id:'1'
				},
				{
					month:'2',
					numzhidin:'24',
					originalPrice:'294.0',
					presentPrice:'248.0',
					id:'2'
				},
				{
					month:'3',
					numzhidin:'96',
					originalPrice:'1176.0',
					presentPrice:'888.0',
					id:'3'
				}],
				payData:[{
					payImg:'../../../static/user2/zfb.png',
					payFont:'支付宝付款',
					paychoose:'../../../static/user2/dui.png'
				},
				{
					payImg:'../../../static/user2/wx.png',
					payFont:'微信支付',
					paychoose:'../../../static/user2/dui.png'
				}]
			};
		},
		methods:{
			qiedhuan(index, item) {
				var self = this
				this.num = index; //this指向app
				this.money=this.vipMoneydata[this.num].presentPrice;
			},
			payButon(e){
				this.ishow=e;
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			openb() {
				this.$refs.popupb.open()
			},
			closeb() {
				this.$refs.popupb.close()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #E5E5E5;
	}
   .header{
	   width: 750rpx;
	   height: 150rpx;
	   background:rgba(255,255,255,1);
	   margin-top: 10rpx;
	   }
	   .photo{
		   width:100rpx;
		   height:100rpx;
		   position: absolute;
		   top: 20rpx;
		   left: 30rpx;
	   }
	   .name{
		   font-size:30rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   left: 151rpx;
		   top: 26rpx;
	   }
	   .vipImg{
		   width:125rpx;
		   height:33rpx;
		   position: absolute;
		   top: 30rpx;
		   left: 230rpx;
	   }
	   .vipStatus{
		   font-size:24rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   position: absolute;
		   top: 86rpx;
		   left: 152rpx;
	   }
	   .tipsBox{
		   width: 710rpx;
		   height: 90rpx;
		   margin-left: 20rpx;
		   display: flex;
		   align-items: center;
	   }
	   .frame{
		   width:10rpx;
		   height:30rpx;
		   background:rgba(115,34,216,1);
		   border-radius:5rpx;
	   }
	   .tipfont{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   margin-left: 12rpx;
		   margin-top: -6rpx;
	   }
	   .privilegeBox{
		   width: 710rpx;
		   height: 100rpx;
		   background: white;
		   border-radius:10rpx;
		   margin-left: 20rpx;
		   display: flex;
		   align-items: center;
		   position: relative;
	   }
	   .privilege{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   left: 20rpx;
	   }
	   .Back_icon{
		   width:14rpx;
		   height:22rpx;
		   position: absolute;
		   right: 20rpx;
	   }
	   .member{
		   width: 710rpx;
		   height: 100rpx;
		   background:rgba(255,255,255,1);
		   border-radius:10rpx;
		   margin-left: 20rpx;
		   display: flex;
		   align-items: center;
		   position: relative;
	   }
	   .memberStyle{
	   		   width: 710rpx;
	   		   height: 100rpx;
	   		   background:rgba(255,255,255,1);	
			   box-shadow:0rpx 0rpx 14rpx 2rpx rgba(115,34,216,0.15);
	   		   border-radius:10rpx;
	   		   margin-left: 20rpx;
	   		   display: flex;
	   		   align-items: center;
	   		   position: relative;
	   }
	   .month{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   left: 21rpx;
	   }
	   .numzhidin{
		   width:150rpx;
		   height:40rpx;
		   background:rgba(115,34,216,1);
		   border-radius:10rpx;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   font-size:20rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(255,255,255,1);
		   position: absolute;
		   left: 119rpx;
	   }
	   .presentPrice{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   right: 20rpx;
	   }
	   .originalPrice{
		   font-size:24rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   text-decoration: line-through;
		   margin-right: 15rpx;
	   }
	   .xieyi{
		   font-size:26rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(115,34,216,1);
		   position: absolute;
		   right: 4rpx;
		   }
		   .payBox{
			   width:710rpx;
			   height:120rpx;
			   background:rgba(255,255,255,1);
			   border-radius:10rpx;
			   margin-left: 20rpx;
			   display: flex;
			   align-items: center;
			   position: relative;
		   }
		   .payFont{
			   font-size:32rpx;
			   font-family:PingFang SC;
			   font-weight:bold;
			   color:rgba(51,51,51,1);
			   position: absolute;
			   left: 19rpx;
		   }
		   .amountPayable{
			   font-size:32rpx;
			   color: #333333;
			   position: absolute;
			   right: 24rpx;
		   }
		   .money{
			   font-size:32rpx;
			   color: #FF3B30;
		   }
		   .payImgbox{
			   width:710rpx;
			   height:120rpx;
			   background:rgba(255,255,255,1);
			   border-radius:10rpx;
			   display: flex;
			   align-items: center;
			   margin-left:20rpx;
			   position: relative;
		   }
		   .payimg{
			   width:70rpx;
			   height:70rpx;
			   position: absolute;
			   left: 20rpx;
		   }
		   .payfonta{
			   font-size:28rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(51,51,51,1);
			   position: absolute;
			   left: 105rpx;
		   }
		   .dui{
			   width: 40rpx;
			   height: 40rpx;
			   position: absolute;
			   right: 25rpx;
		   }
		   .confirmPayment{
			   width:710rpx;
			   height:90rpx;
			   background:rgba(115,34,216,1);
			   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
			   border-radius:20rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   font-size:38rpx;
			   font-family:PingFang SC;
			   font-weight:bold;
			   color:rgba(255,255,255,1);
			   margin-left: 20rpx;
			   margin-top: 30rpx;
			   }
			   .membershipPrivileges_box{
				   width:650rpx;
				   height:813rpx;
				   background:rgba(255,255,255,1);
				   border-radius:30rpx;
			   }
			   .memberImg{
				   width: 428rpx;
				   height: 37rpx;
				   position: absolute;
				   top: 39rpx;
				   left: 111rpx;
			   }
			   .privileges{
				   width:610rpx;
				   height:118rpx;
				   background:rgba(255,255,255,1);
				   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.1);
				   border-radius:20rpx;
				   position: relative;
				   top: 120rpx;
				   left: 20rpx;
				   margin-top: 12rpx;
			   }
			   .frameb{
				   display: block;
				   width:10rpx;
				   height:30rpx;
				   background:rgba(115,34,216,1);
				   border-radius:5rpx;
				   position: absolute;
				   top: 30rpx;
				   left: 30rpx;
			   }
			   .renwuOne{
				   font-size:28rpx;
				   font-family:PingFang SC;
				   font-weight:bold;
				   color:rgba(51,51,51,1);
				   position: absolute;
				   top: 25rpx;
				   left: 61rpx;
			   }
			   .renwuTwo{
				   font-size:22rpx;
				   font-family:PingFang SC;
				   font-weight:400;
				   color:rgba(142,142,142,1);
				   position: absolute;
				   top: 65rpx;
				   left: 62rpx;
			   }
			   .confirem{
				   width:610rpx;
				   height:90rpx;
				   background:rgba(115,34,216,1);
				   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
				   border-radius:20rpx;
				   display: flex;
				   align-items: center;
				   justify-content: center;
				   position: absolute;
				   bottom: 30rpx;
				   left: 20rpx;
				   font-size:36rpx;
				   font-family:PingFang SC;
				   font-weight:bold;
				   color:rgba(255,255,255,1);
				   }
				   .agreementBox{
					   width: 650rpx;
					   height: 900rpx;
					   background:rgba(255,255,255,1);
					   border-radius:30rpx;
				   }
				   .agreeHeadbox{
					   width:650rpx;
					   height:115rpx;
					   display: flex;
					   align-items: center;
					   justify-content: center;
					   }
					   .agrenImg{
						   width: 428rpx;
						   height: 36rpx;
					   }
					   .agrenContent{
						   width: 590rpx;
						   height: 645rpx;
						   overflow: hidden;
						   overflow-y: scroll;
						   position: relative;
						   left: 30rpx;
					   }
					   .general{
						  width: 590rpx;
						  height: 30rpx;
						  background-color: #FFFFFF;
						  display: flex;
						  z-index: 999;
						  position: fixed;
					   }
					   .framea{
						   display: block;
						   width:10rpx;
						   height:30rpx;
						   background:rgba(115,34,216,1);
						   border-radius:5rpx;
					   }
					   .generalfont{
						   font-size:32rpx;
						   font-family:PingFang SC;
						   font-weight:bold;
						   color:rgba(51,51,51,1);
						   position: absolute;
						   top: -8rpx;
						   left: 25rpx;
					   }
					   .generalcen{
						   font-size:28rpx;
						   font-family:PingFang SC;
						   font-weight:400;
						   color:rgba(51,51,51,1);
						   margin-top: 38rpx;
						   position: relative;
						   top: 38rpx;
						   }
						   .confiremBox{
							   width:590rpx;
							   height:90rpx;
							   background:rgba(115,34,216,1);
							   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
							   border-radius:20rpx;
							   font-size:36rpx;
							   font-family:PingFang SC;
							   font-weight:bold;
							   color:rgba(255,255,255,1);
							   display: flex;
							   align-items: center;
							   justify-content: center;
							   position: absolute;
							   bottom: 30rpx;
							   left: 30rpx;
							   }
</style>
